<template>
  <div style=" width: 99%; margin: auto;">
    <h3>本年度在本行政区域内开展公益活动情况</h3>
    <el-row style="margin-top: 50px;">
      <el-col :span="16">
        本年度是否开展活动：
        <el-radio-group v-model="isActivity"  size="default">
          <el-radio label="1">已开展</el-radio>
          <el-radio label="2">未开展</el-radio>
        </el-radio-group>
      </el-col>
      <el-col :span="8" style="text-align: right;">
        <el-button type="primary" style="width: 100px;" @click="addList()">新增</el-button>
      </el-col>
    </el-row>

    <el-form :model="listForm" ref="listFormRef">
    <el-row v-show="isActivity == '1'">
      <el-col :span="24" style="margin-top: 20px;">
        <el-table
          :header-cell-style="{background: '#F0F5FA',color: '#333333'}"
           size="default"
          :data="listForm"
          border>
          <el-table-column prop="activityName" label="活动（项目）名称" align="center" width="160px">
            <template #default="scope">
              <el-form-item :prop="'[' + scope.$index + '].activityName'" :rules="postFormRules.activityName">
              <el-input v-model="scope.row.activityName" placeholder="请输入"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="activityType" label="类型" align="center" width="120px">
            <template #default="scope">
              <el-form-item :prop="'[' + scope.$index + '].activityType'" :rules="postFormRules.activityType">
              <el-select clearable  v-model="scope.row.activityType" placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="dict in activityTypeOptions"
                  :key="dict.id"
                  :label="dict.name"
                  :value="dict.id"
                />
              </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="conductMode" label="活动进行方式" align="center" width="120px">
            <template #default="scope">
              <el-form-item :prop="'[' + scope.$index + '].conductMode'" :rules="postFormRules.conductMode">
              <el-select clearable  v-model="scope.row.conductMode" placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="dict in activityOngoingOptions"
                  :key="dict.id"
                  :label="dict.name"
                  :value="dict.id"
                />
              </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="startTime" label="开始日期" align="center" width="140px">
            <template #default="scope">
              <el-form-item :prop="'[' + scope.$index + '].startTime'" :rules="postFormRules.startTime">
              <el-date-picker
                v-model="scope.row.startTime"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="开始日期">
              </el-date-picker>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="endTime" label="结束日期" align="center" width="140px">
            <template #default="scope">
              <el-form-item :prop="'[' + scope.$index + '].endTime'" :rules="postFormRules.endTime">
              <el-date-picker
                v-model="scope.row.endTime"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="结束日期">
              </el-date-picker>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="活动地点" align="center" width="180px">
            <template #default="scope">
              <el-form-item :prop="'[' + scope.$index + '].address'" :rules="postFormRules.address">
              <el-input v-model="scope.row.address" placeholder="请输入"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="feeSituation" label="收入情况（元）" align="center" width="120px">
            <template #default="scope">
              <el-form-item :prop="'[' + scope.$index + '].feeSituation'" :rules="postFormRules.feeSituation">
              <el-input type="number" v-model="scope.row.feeSituation" placeholder="请输入"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="expenditureSituation" label="支出情况（元）" align="center" width="120px">
            <template #default="scope">
              <el-form-item :prop="'[' + scope.$index + '].expenditureSituation'" :rules="postFormRules.expenditureSituation">
              <el-input type="number" v-model="scope.row.expenditureSituation" placeholder="请输入"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="participantsNum" label="参与人数" align="center" width="100px">
            <template #default="scope">
              <el-form-item :prop="'[' + scope.$index + '].participantsNum'" :rules="postFormRules.participantsNum">
              <el-input type="number" v-model="scope.row.participantsNum" placeholder="请输入"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="activityIntroduction" label="活动介绍" align="center" width="200px">
            <template #default="scope">
              <el-form-item :prop="'[' + scope.$index + '].activityIntroduction'" :rules="postFormRules.activityIntroduction">
                <el-input v-model="scope.row.activityIntroduction" placeholder="请输入"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            width="80">
            <template #default="scope">
              <el-button type="text"  size="default" @click="handleInfo(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    </el-form>

  </div>
</template>
<script>
import { getDictByCode, getTableInfoByPage, mfSaveWelfare, mfSaveYearly } from '@/views/yearCheck/ykb/mf/mf'

export default {
  data() {
    return {
      activityTypeOptions:undefined,
      activityOngoingOptions:undefined,
      addDialog:false,
      isActivity: '',
      listForm: [],
      postForm: {
        id:'',
        activityName: '',//活动名称
        activityType: '',//活动类型
        conductMode: '',//进行方式
        startTime: '',//($date-time)开始时间
        endTime: '',//($date-time)结束时间yyyy-MM-dd
        address: '',//地点
        feeSituation: '',//收费情况
        expenditureSituation: '',//支出情况
        participantsNum: '',//参与人数
        activityIntroduction: '',//活动介绍
        creditCode:localStorage.getItem("creditCode"),//统一社会信用代码
        examineYear: localStorage.getItem("examineYear"),//审查年度
        organizationBaseId:'1',//社团组织id
      },
      postFormRules:{
        activityName: [{ required: true, message: '请完善', trigger: 'blur' }],
        activityType: [{ required: true, message: '请选择', trigger: 'blur' }],
        conductMode: [{ required: true, message: '请选择', trigger: 'blur' }],
        startTime: [{ required: true, message: '请选择', trigger: 'blur' }],
        endTime: [{ required: true, message: '请选择', trigger: 'blur' }],
        address: [{ required: true, message: '请完善', trigger: 'blur' }],
        feeSituation:[{ required: true, message: '请完善', trigger: 'blur' }],
        expenditureSituation:[{ required: true, message: '请完善', trigger: 'blur' }],
        participantsNum:[{ required: true, message: '请完善', trigger: 'blur' }],
        activityIntroduction: [{ required: true, message: '请完善', trigger: 'blur' }],
      }
    };
  },

  created() {

  },
  methods: {
    handleInfo(index){
      this.listForm.splice(index,1);
    },
    postInfo(){

      this.$refs.listFormRef.validate(valid => {
        if (valid) {
          if(this.listForm == null || this.listForm.length == 0){
            return;
          }
          for (let i = 0; i < this.listForm.length; i++) {
            this.listForm[i].creditCode = localStorage.getItem("creditCode");
            this.listForm[i].examineYear = localStorage.getItem("examineYear");
          }
          mfSaveWelfare(this.listForm).then(response => {
            this.$message({
              message: '本年度在本行政区域内开展公益活动情况保存成功！',
              type: 'success'
            });
            this.getInfo();
          });
        } else {
          this.$message({
            message: '请填写完整！',
            type: 'error'
          })
        }
      });

    },
    addList(){
      // this.addDialog = false;
      this.isActivity = '1';
      this.listForm.push(Object.assign({}, this.postForm));
    },
    getInfo() {
      getDictByCode("activityType").then(response => {
        this.activityTypeOptions = response.data;
      });
      getDictByCode("activityOngoing").then(response => {
        this.activityOngoingOptions = response.data;
      });
      getTableInfoByPage(8).then(response => {
        this.listForm = JSON.parse(JSON.stringify(response.data).replace(/null/g, '""'));
        if (this.listForm == null  || this.listForm == '') {
          this.isActivity = '2';
          this.listForm = [];
        } else {
          this.isActivity = '1';
        }
      });
    }
  }
}
</script>
<style scoped lang="scss">
.el-table {
  --el-table-row-hover-bg-color: rgba(39, 137, 238, 0.1);
  --el-table-border-color:#e0e5f0;
}
:deep(.el-card.is-always-shadow) {
  box-shadow: 0 1px 14px 0 rgba(209, 224, 239, 0.6)
}

/* 拉框选中 */
.el-select-dropdown__item {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

/* 鼠标经过下拉框 */
.el-select-dropdown__item:hover {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

.el-select-dropdown__item.selected {
  color: #2789EE;
}
.app-container {
  margin-top: 40px;
  margin-left: 15%;
  width: 70%;
}

.div-bg {
  width: 100%;
  background: #F0F0F0;
  height: 10px;
}

.box-card {
  width: 100%;
  margin-top: 20px;
  padding: 20px;
}

.el-col {
  padding-left: 5px;
}

.divider-title {
  font-weight: bold;
  font-size: 18px;
}

.custom-select .el-select-dropdown {
  max-height: 600px; /* 设置为你想要的高度 */
  overflow: auto; /* 添加滚动条 */
}

table {
  border-collapse: collapse; /* 确保表格的边框合并为单一边框 */
  width: 100%; /* 表格宽度 */
}

td {
  border: 1px solid #ababab; /* 设置单线边框 */
  padding: 6px; /* 单元格内边距 */
}
.el-form-item {
  margin-bottom: 0px;
}
</style>
<!--<el-dialog title="新增公益活动情况" v-model="addDialog">-->
<!--<el-form  size="default" :model="postForm" ref="postForm" label-width="80px" label-position="left">-->
<!--  <el-row :gutter="20">-->
<!--    <el-col :span="11">-->
<!--      <el-form-item label="活动名称" prop="directorName">-->
<!--        <el-input v-model="postForm.activityName" placeholder="请输入"></el-input>-->
<!--      </el-form-item>-->
<!--    </el-col>-->
<!--    <el-col :span="11">-->
<!--      <el-form-item label="活动类型" prop="activityType">-->
<!--        <el-select clearable  v-model="postForm.activityType" filterable placeholder="请选择" style="width: 100%;">-->
<!--          <el-option-->
<!--            v-for="dict in activityTypeOptions"-->
<!--            :key="dict.id"-->
<!--            :label="dict.name"-->
<!--            :value="dict.id"-->
<!--          />-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--    </el-col>-->
<!--    <el-col :span="11">-->
<!--      <el-form-item label="进行方式" prop="conductMode">-->
<!--        <el-select clearable  v-model="postForm.conductMode" filterable placeholder="请选择" style="width: 100%;">-->
<!--          <el-option-->
<!--            v-for="dict in activityOngoingOptions"-->
<!--            :key="dict.id"-->
<!--            :label="dict.name"-->
<!--            :value="dict.id"-->
<!--          />-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--    </el-col>-->

<!--    <el-col :span="11">-->
<!--      <el-form-item label="开始时间" prop="startTime">-->
<!--        <el-date-picker-->
<!--          v-model="postForm.startTime"-->
<!--          type="date"-->
<!--          value-format="YYYY-MM-DD"-->
<!--          placeholder="开始时间">-->
<!--        </el-date-picker>-->
<!--      </el-form-item>-->
<!--    </el-col>-->
<!--    <el-col :span="11">-->
<!--      <el-form-item label="结束时间" prop="endTime">-->
<!--        <el-date-picker-->
<!--          v-model="postForm.endTime"-->
<!--          type="date"-->
<!--          value-format="YYYY-MM-DD"-->
<!--          placeholder="结束时间">-->
<!--        </el-date-picker>-->
<!--      </el-form-item>-->
<!--    </el-col>-->
<!--    <el-col :span="11">-->
<!--      <el-form-item label="活动地点" prop="address">-->
<!--        <el-input v-model="postForm.address" placeholder="请输入"></el-input>-->
<!--      </el-form-item>-->
<!--    </el-col>-->
<!--    <el-col :span="11">-->
<!--      <el-form-item label="收入情况" prop="feeSituation">-->
<!--        <el-input v-model="postForm.feeSituation" placeholder="请输入"></el-input>-->
<!--      </el-form-item>-->
<!--    </el-col>-->
<!--    <el-col :span="11">-->
<!--      <el-form-item label="支出情况" prop="expenditureSituation">-->
<!--        <el-input v-model="postForm.expenditureSituation" placeholder="请输入"></el-input>-->
<!--      </el-form-item>-->
<!--    </el-col>-->
<!--    <el-col :span="11">-->
<!--      <el-form-item label="参与人数" prop="participantsNum">-->
<!--        <el-input v-model="postForm.participantsNum" placeholder="请输入"></el-input>-->
<!--      </el-form-item>-->
<!--    </el-col>-->
<!--    <el-col :span="22">-->
<!--      <el-form-item label="活动介绍" prop="activityIntroduction">-->
<!--        <el-input type="textarea" v-model="postForm.activityIntroduction" placeholder="请输入"></el-input>-->
<!--      </el-form-item>-->
<!--    </el-col>-->
<!--  </el-row>-->
<!--</el-form>-->
<!--<div slot="footer" class="dialog-footer">-->
<!--  <el-button @click="addDialog = false">取 消</el-button>-->
<!--  <el-button type="primary" @click="addList()">确 定</el-button>-->
<!--</div>-->
<!--</el-dialog>-->
